<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<title>省市联动</title>
</head>
<script type="text/javascript">
	//一加载就执行
	$(function(){
		//页面一加载就发送ajax请求
		$.get("/ajax/searchPro",function(d){
			//alert(d);    //因为是一个list集合，所以加载出来的是地址
			
			//首先获取select中的id
			var $pro=$("#proid");
			//遍历对象d里面的内容
			$(d).each(function(){
				//把内容展现出来,在option标签中展示，每一个标签都是要展示的内容
				$pro.append($("<option value="+this.provinceid+">"+this.name+"</option>"));
			});
		},"json");
			
			//给省份下拉添加change事件
			$("#proid").change(function(){
				//获取省的id
				var $pid=$(this).val();
				//发送ajax请求,{"pid":$pid}表示$pid为pid
				$.get("/ajax/searchCity",{"pid":$pid},function(d){
					//首先获取省份select中的id
					var $city=$("#cityid");
					//每次都得清空
					$city.html("<option>--请选择--</option>");
					if(d!=null){
						//把d循环出来
						$(d).each(function(d){
							$city.append($("<option value="+this.cityid+">"+this.name+"</option>"));
						});
					}
				},"json");
			});
	})
</script>
<body>
	<select id="proid" name="province">
		<option>--省份--</option>
		<!-- 
			<option value="1">北京</option>
		 -->
	</select>
	<select id="cityid" name="city">
		<option>--请选择--</option>
	</select>
</body>
</html>